<script lang="ts" setup>
import changeMusic from '../assets/切歌.png'
import addContext from '../assets/祝福.png'
const props = defineProps(['total'])
const emits = defineEmits(['sendContext','changeMusic'])
function emitSendContext(){
  emits('sendContext')
}

function emitChangeMusic(){
  emits('changeMusic')
}

const isPc = window.config.isPc
</script>

<template>
  <div :class="isPc?'ant-container':''">
    <div :class="isPc?'ant-header':'header'">
      <span  style="font-size: 16px;font-weight: 600;color: white;z-index: 5">实时留言数：{{props.total}}</span>
    </div>
    <div class="main">
      <slot/>
    </div>
    <van-action-bar class="footerBar" :class="isPc?'pcFooterBar':'footerBar'">
      <div style="display: flex;width: 100%;justify-content: space-around">
        <img :src="changeMusic" @click="emitChangeMusic" style="width: 100px"/>
        <img :src="addContext" @click="emitSendContext" style="width: 100px"/>
      </div>
    </van-action-bar>
  </div>
</template>

<style scoped>
.header{
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footerBar {
  height: 70px;
  border-top: white solid 1px;
  background-image: url("src/assets/footer.png");
  /*background-attachment: fixed;*/
  background-size: 100% 100%;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2)
}

.pcFooterBar {
  height: 10vh;
  border-top: white solid 1px;
  background-image: url("src/assets/footer.png");
  /*background-attachment: fixed;*/
  background-size: 100% 100%;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2)
}
.ant-header{
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ant-container{
  min-width: 800px;
}
</style>